<template>

	<!-- 搜索 -->

	<view class="">
		<view style="background:  #fff" class="my-head">
			<u-icon name="arrow-left" color="#666666" size="22" @click="fnCancel"></u-icon>
			<view>
				<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="zhiweiConfirm"></u-picker>
			</view>
			<!-- @search="search" -->
			<view class="search-box  fl-t">
				<u-search :clearabled="true" :showAction='false' v-model="keyWord" @change="searchChange"
					@search="search" :label="zhiweiqiye" @clickIcon="show=true" :searchIcon="searchIcon"
					:searchIconSize="14"></u-search>
			</view>

			<view class="head-right  fl-t" @click="search(keyWord)"> 搜索
			</view>
		</view>
		<view class="occupy"></view>
		<!--历史记录-->
		<view class="content-box">
			<view class="title">历史记录</view>
			<view class="fl-w" style="width: 100%;" v-if="NewlishijiluData.length>0">
				<view class="list-tab" v-for="(item,index) in NewlishijiluData">
					<view style="font-size: 30rpx;" @click="clickTab(item,index)" >{{item}}</view>
					<u-icon @click="delTab(item, index)" size="15" name="close" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="100">
			</u-empty>
			<!-- 	<view class="title">热门搜索</view>
			<view class="fl-w" style="width: 100%;">
				<view class="list-tab" v-for="(item,index) in hotJob" @click="clickHotJob(item)">
					<view>
						{{item.JobName}}
					</view>
				</view>
			</view> -->
		</view>


	</view>
</template>

<script>
	import pickRegions from '@/pages/component/pick-regions/pick-regions.vue'
	export default {

		data() {
			return {
				URL: this.$config.staticUrl,
				city1: '',
				filter: ["重庆市", "上海市", "天津市", "北京市"],
				defaultRegion: ["重庆市", "", ""],
				isSel: false, //是否是选择
				AddressRes: [], //过滤后传后端的结果
				keyWord: '', //搜索内容
				isSearch: false,
				selTab: 0,
				selRegion: '',
				setHistory: '',
				hotData: [],
				HistoryData: [],
				//职位
				positionList: [],
				page: 1,
				size: 10,
				more: true,
				//公司
				companyList: [],
				page1: 1,
				size1: 10,
				more1: true,

				IsHot: 1, //职位分类ID
				PageIndex: 1, //页码
				PageSize: 5, //每页大小
				Newlishijilu: [], //历史记录存值
				NewlishijiluData: [], //历史记录存值
				hotJob: [], //热门职位
				columns: [
					['职位', '企业']
				],
				show: false,
				zhiweiqiye: '',
				zhiweiqiyeId: 1,
				label: "职位", //显示搜索框默认值
				searchIcon: "arrow-down"
			}
		},
		onLoad(o) {
			console.log(o);
			if (o && o.city != undefined) {
				this.city1 = o.city
			} else {
				this.city1 = '搜索'
			}
			console.log(this.city1);
			// this.Hot();
			// this.getLocation();

			// if (data) {
			// 	this.NewlishijiluData = data.split(',');
			// }

		},
		components: {
			pickRegions
		},
		computed: {},
		onShow() {
			// this.fnsetHistory()
			this.NewlishijiluData = uni.getStorageSync("NewlishijiluData").reverse();
			// console.log(this.NewlishijiluData);
			if (this.NewlishijiluData.length > 0) {

				// console.log(this.NewlishijiluData);

				let uniqueArray = this.NewlishijiluData.filter((item, index, array) => {
					return array.indexOf(item) === index
				})

				// console.log(uniqueArray);

				this.NewlishijiluData = uniqueArray

			}
		},
		// 初次渲染
		onReady() {


		},
		watch: {

		},
		created() {
			this.searchHotJob()
			// console.log(this.columns);
			this.zhiweiqiye = this.columns[0][0]


		},
		onReachBottom() {
			// 下拉懒加载
			// console.log("懒加载")
			if (this.selTab == 0) {
				if (this.more) {
					this.getPosition()
				}
			} else {
				if (this.more1) {
					this.getCompanyList()
				}
			}
		},
		methods: {
			zhiweiConfirm(e) {
				console.log(e);
				this.zhiweiqiye = e.value[0]
				if (this.zhiweiqiye == "企业") {
					this.zhiweiqiyeId = 2
				} else {
					this.zhiweiqiyeId = 1
				}
				// console.log(this.zhiweiqiye);
				this.cancel()
			},
			// 职位企业下拉选择
			cancel() {
				this.show = false
			},
			searchHotJob() {
				let obj = {
					IsHot: this.IsHot, //职位分类ID
					PageIndex: this.PageIndex, //页码
					PageSize: this.PageSize, //每页大小
				}
				this.$http.huirc.jobsearch(obj).then(res => {
					// console.log(res);
					if (res.Result) {
						this.hotJob = res.Result.Items
					}
				})
			},

			searchChange(e) {
				// console.log(e);

			},
			search(e) {
				// console.log(e);



				if (e !== '' && e.replace(/ /g, "") !== "") {
					this.keyWord = e
					// uni.setStorageSync('NewlishijiluData', []);

					console.log(uni.getStorageSync('NewlishijiluData'));

					if (uni.getStorageSync('NewlishijiluData')) {
						this.Newlishijilu = uni.getStorageSync('NewlishijiluData');
						this.Newlishijilu.push(this.keyWord)
						// console.log(this.Newlishijilu);

						uni.setStorageSync('NewlishijiluData', this.Newlishijilu)
						this.goSearch()
						this.keyWord = ''

					} else {

						this.Newlishijilu.push(this.keyWord);
						// console.log(this.Newlishijilu);
						uni.setStorageSync('NewlishijiluData', this.Newlishijilu)
						this.goSearch()
						this.keyWord = ''
					}


				} else {
					this.$util.toast("搜索内容不能为空")
				}



			},

			screeningCities() {
				this.empty();

			},
			// 热门搜索点击
			clickHotJob(e) {
				console.log(e);
			},


			clickTab(val, index) {
				console.log(val, index);
				this.keyWord = val
				let List = uni.getStorageSync('NewlishijiluData')
				if (List.includes(val)) {
					List.unshift(val);
					uni.setStorageSync("NewlishijiluData", List);
				}
				this.goSearch()
			},
			delTab(val,index){
				console.log(val, index);
				this.NewlishijiluData.splice(index, 1)
				uni.setStorageSync('NewlishijiluData',this.NewlishijiluData)
			},
			empty() {
				this.positionList = [];
				this.page = 1;
				this.more = true;
				this.companyList = [];
				this.page1 = 1;
				this.more1 = true;
				//如果空查所有数据
				if (this.selTab == 0) {
					this.getPosition();
				} else {
					this.getCompanyList();
				}
			},
			fnsetHistory(val) {
				// let List = uni.getStorageSync("searchHistory").split(',');
				let List = uni.getStorageSync('NewlishijiluData');
				if (!List.includes(val)) {
					// List.unshift(val);
					if (List.length > 10) {
						List = List.slice(0, 10)
					}
					// List = List.join(',');
					uni.setStorageSync("NewlishijiluData", List);
				}
			},

			fnCancel() {
				uni.navigateBack();
			},
			handleGetRegion(e) { //获取到的数据
				console.log(e);
			},
			goSearch() {
				uni.navigateTo({
					// url: '/pages/views/packageA/type-jobhunting/search/searchResult?keyword=' + 
					url: `/pages/views/packageA/type-jobhunting/search/searchResult?keyword=${this.keyWord}&jobCorp=${this.zhiweiqiyeId}`
				})
				this.keyWord = ''
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.page-bg {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
	}

	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 50rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		//justify-content: space-between;  
		align-items: center;
		box-sizing: border-box;
		z-index: 999;

		.location_box {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			flex-shrink: 0;

			view {
				flex-shrink: 0;
			}

			.triangle {
				width: 0;
				height: 0;
				border-top: 10rpx solid #000;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid transparent;
				border-left: 10rpx solid transparent;
				flex-shrink: 0;
				position: relative;
				transform: translate(0, 50%);
				margin-left: 20rpx;
			}

		}

		.search-box {

			border-radius: 32px;
			height: 64rpx;
			margin: 0 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			flex: 1;


			input {
				width: auto !important;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin-left: 20rpx;
				flex: 1;
			}

			.input-pla {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}



		.head-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			min-width: 70rpx;
		}
	}


	.content-box {
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;

		.title {
			margin: 30rpx 0;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #313131;
		}

		.list-tab {
			margin: 0 20rpx 20rpx 0;
			padding: 14rpx 20rpx;
			background: #F7F7F7;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			display: flex;
		}
	}

	.type-tab {
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		height: 68rpx;
		padding: 0 68rpx;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 2;

		.item {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #313131;
			margin-right: 50rpx;
		}

		.activation {
			color: #1684FC;
			position: relative;

			view {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				width: 30rpx;
				height: 4rpx;
				background: #1684FC;
			}
		}
	}

	.content3 {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;

		view {

			.job_name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				width: auto;
			}

			.wages {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F35370;
				width: auto;
			}
		}

		.requirement {
			width: 100%;
			margin: 30rpx 0 20rpx;

			view {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #313131;
				width: auto;
				margin-right: 50rpx;
			}
		}

		.treatment {
			border-bottom: 1px solid #DEE5EF;

			view {
				padding: 14rpx 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				background: #F7F7F7;
				border-radius: 4rpx;
				margin-right: 20rpx;
				width: auto;
				margin-bottom: 20rpx;
			}
		}

		.company-bottom {
			padding-top: 24rpx;

			.left-company {
				width: auto;
				height: auto;

				.logo {
					width: 60rpx;
					height: 60rpx;
					flex-shrink: 0;
				}

				.company-name-box {
					height: 60rpx;
					margin-left: 50rpx;
					position: relative;

					.on-line {
						position: absolute;
						width: 12rpx;
						height: 12rpx;
						background: #14C88B;
						border-radius: 50%;
						bottom: 0;
						left: -40rpx;
					}

					.company-name {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						width: auto;
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						overflow: hidden;
						word-break: break-all;
						/* break-all(允许在单词内换行。) */
						text-overflow: ellipsis;
						/* 超出部分省略号 */
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 1;
						/** 显示的行数 **/

					}
				}
			}

			.position_item {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;


				view {
					margin-left: 20rpx;
					display: -webkit-box;
					/** 对象作为伸缩盒子模型显示 **/
					overflow: hidden;
					word-break: break-all;
					/* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					-webkit-box-orient: vertical;
					/** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 1;
					/** 显示的行数 **/
				}
			}
		}
	}

	.company-list {
		width: 100%;
		padding: 30rpx 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;
		flex-shrink: 0;

		.logo {
			width: 128rpx;
			height: 128rpx;
			margin-right: 40rpx;
		}

		.company_name {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.tab {
			margin: 26rpx 0 20rpx;

			view {
				margin-right: 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #313131;
			}
		}

		.position_num {
			display: inline-block;
			padding: 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			background: #F7F7F7;
			border-radius: 4rpx;
			color: #666;
			line-height: 1;

			text {
				color: #F35370;
			}
		}

	}
</style>